<!-- 热门 -->
<script setup>
import {ref,onMounted} from "vue"
import {router} from "../../router"

const clickBtnDialog1 = ref('clickBtnDialog')
const clickBtnDialog2 = ref('')

import huo_white from "../../../public/icons/home/huo_white.svg"
import icon_music from "../../../public/images/master/icon_music.png"
onMounted(()=>{

})

const goToWherePopular = async(num) => {
    switch(num){
        case 1:
            clickBtnDialog1.value = "clickBtnDialog"
            clickBtnDialog2.value = ""
            router.replace('/popular/all')
            break
        case 2:
            clickBtnDialog1.value = ""
            clickBtnDialog2.value = "clickBtnDialog"
            router.replace('/popular/music')
            break
    }
}

</script>

<template>
    <div class="pageAll">
        <div class="dialogBox"></div>
        <div class="popularMasterBox">
            <div class="dialog1Box">
                <div class="dialog2Box" :class="clickBtnDialog1" @click="goToWherePopular(1)">
                    <div class="dialog2ImageBox"><img :src="huo_white" alt="" /></div>
                    <div class="dialog2NameBox"><span>{{"综合热门"}}</span></div>
                </div>
                <div class="dialog3Box" :class="clickBtnDialog2" @click="goToWherePopular(2)">
                    <img :src="icon_music" alt="" class="dialog3BoxImage"/>
                    <div class="dialog3NameBox"><span>{{"全站音乐榜"}}</span></div>
                </div>
            </div>
            <div class="showBox">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<style scoped>
.pageAll{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.dialogBox{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 20%;
    background: rgb(240,119,117);
}
.popularMasterBox{
    position: absolute;
    left: 0;
    top: 20%;
    width: 100%;
    height: 80%;
    /* overflow-y: auto; */
}
.dialog1Box{
    width: 100%;
    height: 15%;
    display: flex;
    align-items: center;
}
.dialog2Box{
    margin-left: 100px;
    width: 10%;
    height: 70%;
    display: flex;
    align-items: center;
    border-bottom: 5px solid white;
    cursor: pointer;
}
.dialog3Box{
    margin-left: 100px;
    width: 10%;
    height: 70%;
    display: flex;
    align-items: center;
    border-bottom: 5px solid white;
    cursor: pointer;
}
.dialog2ImageBox{
    width: 30%;
    height: 60%;
    background: rgb(240,119,117);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dialog2ImageBox img{
    width: 70%;
    height: 70%;
}
.dialog2NameBox{
    width: 70%;
    height: 100%;
    display: flex;
    align-items: center;
}
.dialog2NameBox span{
    margin-left: 15px;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.1s;
}
.dialog2NameBox span:hover{
    color: skyblue;
}
.clickBtnDialog{
    border-bottom: 5px solid skyblue;
}
.dialog3BoxImage{
    width: 28%;
    height: 60%;
}
.dialog3NameBox{
    width: 68%;
    height: 100%;
    display: flex;
    align-items: center;
}
.dialog3NameBox span{
    margin-left: 10px;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.1s;
}
.dialog3NameBox span:hover{
    color: skyblue;
}

.showBox{
    width: 100%;
    height: 85%;
    overflow-y: auto;
}
</style>